<template>
    <el-dialog
        :close-on-click-modal="false"
        v-model="dialogFormVisible"
        :title="title"
        width="640px"
        :before-close="handleClose"
        style="top: 100px"
    >
        <el-form
            v-loading="formLoading"
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="120px"
            class="demo-form"
            :size="formSize"
            status-icon
        >
            <el-form-item label="角色名" prop="roleName" :label-width="100" required>
                <el-input v-model="form.roleName" autocomplete="off" maxlength="60" placeholder="请输入角色名"/>
            </el-form-item>
            <el-form-item label="角色代号" prop="roleCode" :label-width="100" required>
                <el-input v-model="form.roleCode" autocomplete="off" maxlength="200" placeholder="请输入角色代号"/>
            </el-form-item>
            <el-form-item label="删除状态" prop="isDeleted" :label-width="100" required>
                <el-radio-group v-model="form.isDeleted">
                    <el-radio :label="1">已删除</el-radio>
                    <el-radio :label="0">未删除</el-radio>
                </el-radio-group>
            </el-form-item>
            <div class="dialog-footer" style="text-align: center">
                <el-button class="kva-button" @click="handleClose" icon="Close">取消</el-button>
                <el-button class="kva-button" type="primary" @click="handleSubmit" :loading="suLoading" icon="Check">
                    {{ form.id ? "更新" : "保存" }}
                </el-button>
            </div>
        </el-form>
    </el-dialog>
</template>

<script setup>
import {GetById, SaveData, UpdateData} from "@/api/sysRole.js"
import {kvaMessage} from "@/utils/kvaMessage.js";
import debounce from "@/utils/debounce.js";

// 定义控制打开弹窗的属性
const dialogFormVisible = ref(false)
// 定义打开弹窗的标题
const title = ref("")
// 定义打开弹窗时的加载属性
const formLoading = ref(false)
// 提交时候的加载属性
const suLoading = ref(false)
// 数据重新加载（刷新）
const emits = defineEmits("load")

// 定义用户提交时验证表单的属性
const formRef = ref({})

// 定义添加的用户属性
let form = ref({
    roleName: "",
    roleCode: "",
    isDeleted: 0
})

// 定义验证规则
const rules = reactive({
    "roleName": [{required: true, message: '请输入角色名', trigger: 'blur'}],
    "roleCode": [{required: true, message: '请输入角色代号', trigger: 'blur'}],
})


// 打开弹窗的方法
const handleOpen = async (userId) => {
    // 打开弹窗的属性
    dialogFormVisible.value = true
    // 判断是否有用户Id，如果有就是编辑，如果没有就是添加
    if (userId) {
        title.value = '编辑系统用户'
        // 开启加载的动画
        formLoading.value = true
        // 调用根据用户ID查询的接口
        const resp = await GetById(userId)
        // 关闭加载的动画
        formLoading.value = false
        // 用户信息回填
        form.value = resp.data
    } else {
        title.value = '添加系统用户'
        form.value.password = "123456"
    }
}

// 提交保存
const handleSubmit = () => {
    // 防抖，在有效时间内，只有最后一次执行
    debounce(() => {
        // 表单校验
        formRef.value.validate(async (valid, fields) => {
            if (valid) {
                // 防护用户连续点击
                suLoading.value = true
                form.value.id ? await UpdateData(form.value) : await SaveData(form.value)
                suLoading.value = false
                // 提示信息
                kvaMessage.notifySuccess(form.value.id ? "更新成功！" : "保存成功！")
                // 关闭弹窗
                handleClose()
                // 重新加载数据
                emits("load")
            }
        })
    }, 1000)
}


// 关闭弹窗的方法
const handleClose = () => {
    // 关闭弹窗的属性
    dialogFormVisible.value = false
    // 清空id
    delete form.value.id
    // 清空弹窗菜单数据
    formRef.value.resetFields()
}

// 导出子组件
defineExpose({
    handleOpen
})

</script>

<style scoped lang="scss">

</style>
